<template>
  <div class="page-main" v-title data-title="工程采购申请单">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"><span>工程采购申请单</span></div>
    <div class="container">
      <div class="head-content">
        <span class="bold-font">工程采购申请单</span>
        <div class="btn-line">
          <a-button icon="a-icon-files" type="primary">保存</a-button>
          <a-button icon="a-icon-s-grid" plain>提交</a-button>
        </div>
      </div>
      <div class="app-container">
        <a-form-model :model="form" :rules="rules" style="margin-top: 10px" label-width="160px" label-position="right">
          <section>
            <div class="section-header">项目信息</div>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="采购申请号:">
                  <a-input v-model="form.applyCode" placeholder="自动生成流水号" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申领人/部门:">
                  <a-input v-model="userDept" disabled placeholder="自动带入信息" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请时间:">
                  <a-date-picker disabled style="width: 100%" valueFormat="YYYY-MM-DD" v-model="form.applyTime"
                    placeholder="自动带入时间" />
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="项目编号:">
                  <a-input v-model="form.proNo" placeholder="项目编号" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="项目名称:">
                  <a-input v-model="form.proName" placeholder="项目名称" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="项目经理:">
                  <a-input v-model="form.proManager" placeholder="项目经理" disabled />
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="费用类型:">
                  <a-input v-model="form.proNo" placeholder="项目编号" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="项目类型:">
                  <a-input v-model="form.proName" placeholder="项目名称" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="施工区域:">
                  <a-input v-model="form.proManager" placeholder="项目经理" disabled />
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="采购项名称:">
                  <a-input v-model="form.applyCode" placeholder="请输入采购项名称" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="费用支出号:">
                  <a-input v-model="form.applyCode" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="签订公司:">
                  <a-input v-model="form.applyCode" />
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="使用车间:">
                  <a-input v-model="form.applyCode" placeholder="请填写使用车间" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="用途:">
                  <a-input v-model="form.applyCode" placeholder="请填写用户" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="现场跟进人:">
                  <a-input v-model="form.applyCode" placeholder="点击选择现场跟进人" />
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="预算金额:">
                  <a-input v-model="form.applyCode" placeholder="请填写预算金额" type="number" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同生效时间:">
                  <a-input v-model="form.applyCode" placeholder="自动生成流水号" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="进场到货时间:">
                  <a-input v-model="form.applyCode" placeholder="自动生成流水号" />
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item label="采购申请说明:">
                  <a-textarea :auto-size="{ minRows: 3, maxRows: 10 }" :maxLength="500" placeholder="由申请人补充采购申请说明" />
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="是否数字贷：">
                  <a-radio-group name="radioGroup" v-model="form.digitalLoan" @change="changeDigitalLoan"
                    :disabled="!checkPermission(['WORK_REPORT_ADMIN', 'WORK_REPORT_MANAGER'])">
                    <a-radio v-for="(code, index) in yesOrNot" :key="index" :value="code.code">
                      {{ code.name }}
                    </a-radio>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col :span="16">
                <a-form-model-item label="备案证名称：">
                  <a-select v-model="form.filingName" :disabled="!project.digitalLoan">
                    <a-select-option v-for="(item, index) in codes['数字贷备案证名称']" :key="'filingName' + index"
                      :value="item.name" :disabled="!checkPermission(['WORK_REPORT_MANAGER'])">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
          </section>
          <section>
            <div class="section-header">物料明细</div>
            <div style="display: flex; justify-content: flex-end">
              <a-button icon="a-icon-download" type="primary" @click="openMaterialsSelector('1')">获取库存数据</a-button>
              <a-button icon="a-icon-s-grid" plain>删除</a-button>
            </div>
            <a-table :scroll="{ x: 1800 }" class="hte-table-content" :columns="tab.colums" :data-source="tab.list"
              :pagination="false" :rowKey="(record, index) => record.randomStr"
              :row-selection="{ selectedRowKeys: tab.rowKeys }" bordered>
              <template slot="remarkRender" slot-scope="text, record">
                <a-input v-model="record.remark" />
              </template>
            </a-table>
          </section>
        </a-form-model>
      </div>
    </div>
  </div>
</template>
<script>
import { postAction, getAction } from '@/api/manage'
import { ColumnWidthMixin } from '@/views/materials/ColumnWidthMixin'
export default {
  mixins: [ColumnWidthMixin],
  name: 'PurchaseApply',
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractTaskList',
      },
      urls: {

      },
      rules: {
        // costNum: [{ required: true, message: "费用号", trigger: "change" }],
        // projectName: [
        //   { required: true, message: "项目名称", trigger: "change" },
        // ],
        // projectManager: [
        //   { required: true, message: "项目负责人", trigger: "change" },
        // ],
        // consumUser: [{ required: true, message: '请选择申领人', trigger: 'change' }],
        // consumContact: [{ required: true, message: '请输入联系电话', trigger: 'change' }],
        // remark: [{ required: true, message: '请输入领料说明', trigger: 'change' }],
        // applyTotalPrice: [{ required: true, message: '请输入申领物料总价', trigger: 'change' }],
        // bdmng: [{ required: true, message: '请输入领用数量', trigger: 'change' }],
        // consumTime: [{ required: true, message: '请输入申领时间', trigger: 'change' }],
      },
      form: {
        applyUserId: '',
        applyUserName: '',
        applyDeptId: '',
        applyDeptName: '',
        applyCode: '',
        applyDept: '',
        proNo: '',
        proName: '',
        proManager: '',

        applyTime: ''

      },
      tab: {
        rowKeys: [],
        colums: [],
        list: []
      },
      url: {

      },
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      columns: [
        {
          title: '物料类型',
          dataIndex: 'materialsType',
          width: '100px',
          align: 'center',
          // scopedSlots: { customRender: 'materialsTypeRender' },
        },
        {
          title: '寄售标志',
          dataIndex: 'sobkz',
          width: '100px',
          align: 'center',
          scopedSlots: { customRender: 'sobkzRender' },
        },
        {
          title: '拣配单号',
          dataIndex: 'jpno',
          width: '140px',
          align: 'center',
        },
        {
          title: '配送单号',
          dataIndex: 'psno',
          width: '140px',
          align: 'center',
        },
        {
          title: '物料编码',
          dataIndex: 'matnr',
          width: '120px',
          align: 'center',
          scopedSlots: { customRender: 'matnrRender' },
        },
        {
          title: '单位',
          dataIndex: 'meins',
          width: '60px',
          align: 'center',
        },
        {
          title: '领用数量',
          dataIndex: 'bdmng',
          width: '100px',
          align: 'center',
          scopedSlots: { customRender: 'bdmngRender' },
        },
        {
          title: '领用金额',
          dataIndex: 'totalPrice',
          width: '100px',
          align: 'center',
        },
        {
          title: '移动单价',
          dataIndex: 'price',
          width: '100px',
          align: 'center',
        },
        {
          title: '收货方',
          dataIndex: 'wempf',
          width: '100px',
          align: 'center',
        },
        // {
        //   title: '项目负责人',
        //   dataIndex: 'projectManager',
        //   width: '120px',
        //   align: 'center',
        // },
        {
          title: '是否急用',
          dataIndex: 'isUrgent',
          width: '100px',
          align: 'center',
        },
        {
          title: '备注',
          dataIndex: 'remark',
          width: '100px',
          align: 'center',
          scopedSlots: { customRender: 'remarkRender' },
        },
        {
          title: '可用库存',
          dataIndex: 'lessNum',
          width: '100px',
          align: 'center',
        },
        {
          title: '预留数量',
          dataIndex: 'reserveNum',
          width: '100px',
          align: 'center',
        },
        {
          title: '提货数量',
          dataIndex: 'ENMNG',
          width: '100px',
          align: 'center',
        },
        {
          title: '库存总数',
          dataIndex: 'stockNumTotal',
          width: '100px',
          align: 'center',
        },
        {
          title: '成本中心',
          dataIndex: 'kostl',
          width: '140px',
          align: 'center',
          scopedSlots: { customRender: 'kostlRender' },
        },
        {
          title: 'WBS元素',
          dataIndex: 'posid',
          width: '140px',
          align: 'center',
          scopedSlots: { customRender: 'posidRender' },
        },
        {
          title: '需求部门',
          dataIndex: 'KTEXT',
          width: '100px',
          align: 'center',
          scopedSlots: { customRender: 'applyUserDeptRender' },
        },
        {
          title: '订单下达人',
          dataIndex: 'createOrderUser',
          width: '120px',
          align: 'center',
          scopedSlots: { customRender: 'applyUserRender' },
        },
        {
          title: '预留单号',
          dataIndex: 'RSNUM',
          width: '100px',
          align: 'center',
        },
        {
          title: '预留单项目号',
          dataIndex: 'RSPOS',
          width: '120px',
          align: 'center',
        },

        {
          title: '库存地点',
          dataIndex: 'lgort',
          width: '100px',
          align: 'center',
        },
      ],
    }
  },

  created() {

  },
  computed: {
    userDept() {
      return this.form.applyUserName + '/' + this.form.applyDeptName
    }
  },
  methods: {

  },
}
</script>

<style scoped>
.demo-table-expand .a-form-model-item {
  margin-right: 0;
  margin-bottom: 0px;
}

.demo-table-expand span {
  display: inline-block;
  white-space: nowrap;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.a-form-model-item>>>.a-form-model-item--mini .a-form-model-item__label {
  color: #606266 !important;
  font-size: 12px !important;
  font-weight: normal;
}

.a-table>>>.a-table__expanded-cell[class*='cell'] {
  padding: 0px 0px 10px 0px;
}

.expand-title {
  height: 30px;
  line-height: 30px;
  background-color: #f1f1f1;
  padding-left: 50px;
  margin-bottom: 5px;
  font-size: 12px;
}

.a-form-model-item>>>.a-form-model-item__content {
  height: 36px;
}

.ellipse-tooltips {
  display: inline-block;
  white-space: nowrap;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipse-tooltips span {
  width: unset !important;
}

.a-range>>>.a-range-separator {
  width: 20px;
}

.searchForm {
  display: flex;
  flex-direction: row;
}

.searchForm-left {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 85vw;
}

.searchForm-right {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-width: 280px;
  border-left: #cccccc 2px solid;
}
</style>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';

.page-main {
  .banner {
    background-image: url(~@assets/contract-top.png);
  }

  .container {
    .content-list {
      margin-top: 15px;
    }
  }

  .font-active {
    cursor: pointer;
  }
}

.costNumClass0 {}

.costNumClass1 {}

/deep/.ant-select-dropdown {
  width: 400px !important;
}
</style>

